<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OkayDesigner</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">

    <script src="/js/jquery-2.0.0.min.js"></script>
    <script src="/js/jquery-ui.js"></script>
    <script src="/js/jsplumb.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">

    <!-- 引入组件 -->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vant/lib/vant.min.js"></script>

    <link rel="stylesheet" href="/css/vm.css">
</head>
<body>
<header class = "od-header bg-white">
    <div class = "brand">
        <p class = "logo">OkayDesigner</p>
        <p class = "desc">让代码简单点</p>
    </div>
    <div class = "menu-box">
        <div class = "wrap"></div>
        <div class = "menu-item save-prj" >
            <i class = "fa fa-floppy-o"></i>
            <div>保存</div>
        </div>
        <div class = "menu-item preview-prj">
            <i class = "fa fa-eye"></i>
            <div>预览</div>
        </div>
        <div class = "menu-item">
            |
        </div>
        <div class = "menu-item download-prj">
            <i class = "fa fa-cloud-download"></i>
            <div>下载</div>
        </div>
        <div class = "menu-item export-prj">
            <i class = "fa fa-mail-forward "></i>
            <div>导出设计图</div>
        </div>
        <div class = "menu-item">
            |
        </div>
        <div class = "menu-item has">
            <i class = "fa fa-object-group"></i>
            <div>视图</div>
            <ul class = "viewport-adjust">
                <li data-width = "360" data-height = "640" data-size="11px">Galaxy&nbsp;S5</li>
                <li data-width = "411" data-height = "731" data-size="12px">Pixel2</li>
                <li data-width = "411" data-height = "823" data-size="12px">Pixel2 XL</li>
                <li data-width = "320" data-height = "568" data-size="11px">iPhone5/SE</li>
                <li data-width = "375" data-height = "667" data-size="12px">iPhone6/7/8</li>
                <li data-width = "414" data-height = "736" data-size="12px">iPhone6/7/8Plus</li>
                <li data-width = "375" data-height = "812" data-size="11px">iPhoneX</li>
                <li data-width = "768" data-height = "1024" data-size="23.5px">iPad</li>
                <li data-height = "1024" data-height = "1366" data-size="25px">iPadPro</li>
            </ul>
        </div>
        <div class = "menu-item orientation">
            <i class = "fa fa-arrows-h"></i>
            <div>横屏</div>
        </div>
        <div class = "wrap"></div>
    </div>
    <div class = "project-info" >
        <i class = "fa fa-anchor"></i>
        <span id = "projectinfo"></span>
    </div>
</header>
<div class = "od-body">
    <aside class = "aside-menu">
        <div class = "od-tabs">
            <header class = "od-tabs-title">
                <div class = "od-tab-title active" tab-target = "file"><i class = "fa fa-file-text-o"></i>文件</div>
                <div class = "od-tab-title" tab-target = "components"><i class = "fa fa-archive"></i>组件</div>
                <div class = "od-tab-title" tab-target = "procedure"><i class = "fa fa-code-fork"></i>流程</div>
            </header>
            <div class = "od-tab-content">
                <div class = "od-tab-content-item active" id = "file">
                    <div class = "bg-light">
                        <section class = "menu">
                            <i class = "fa fa-plus new" title="新建文件"></i>
                            <div class = "newFile">
                                <ul>
                                    <li id="newView">视图文件</li>
                                    <li id="newProcedure">流程文件</li>
                                </ul>
                            </div>
                        </section>
                    </div>
                    <div class = ""  id = "filelist">

                    </div>
                </div>
                <div class = "od-tab-content-item views" id = "components">
                    <table class = "views-table">
                        <tr>
                            <th colspan="3">常规</th>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable nm inline" action-view="text">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>文字</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable nm inline" action-view = "link">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class = "fa fa-chain"></i><p>链接</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable nm">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class = "fa fa-indent"></i><p>段落</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable nm" action-view = "highlight">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class = "fa fa-header"></i><p>标题</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable nm" action-view = "horizontal">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class = "fa fa-minus"></i><p>分割线</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable nm" action-view = "div">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class = "fa fa-object-group"></i><p>普通框</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable nm" action-view="image">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class = "fa fa-file-image-o"></i><p>图片</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable nm">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class = "fa fa-file-sound-o"></i><p>音频</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable nm">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class = "	fa fa-file-video-o"></i><p>视频</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th colspan = "3">基础组件</th>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm"  action-view="layout">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>布局</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="badgegroup">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>徽章容器</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="badge">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>徽章</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm" action-view="button">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>按钮</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm"  action-view="cellgroup">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>单元格容器</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="cell">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>单元格</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm" action-view="circle">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>环形进度</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm"  action-view="collapse">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>折叠容器</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="collapseitem">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>折叠项</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm" action-view="icon">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>图标</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm"  action-view="list">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>列表</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="loading">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>加载</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm" action-view="navbar">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>导航栏</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm"  action-view="noticebar">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>通告栏</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="pagination">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>分页</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm" action-view="panel">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>面板</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm"  action-view="popup">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>弹出层</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="progress">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>进度条</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm" action-view="steps">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>步骤容器</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm"  action-view="step">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>步骤</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="swipe">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>轮播</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm" action-view="swipeitem">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>轮播项</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="tabs">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>标签容器</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm"  action-view="tab">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>标签</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm" action-view="tabbar">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>标签栏</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="tag">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>标记</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                           <th colspan="3">表单组件</th>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm"  action-view="checkbox">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>复选框</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="field">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>输入框</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="numberkeyboard">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>数字键盘</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm"  action-view="passwordinput">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>密码框</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="radio">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>单选框</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="rate">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>评分</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm"  action-view="search">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>搜索</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="slider">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>滑块</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="stepper">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>步进器</p></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm"  action-view="switch">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>开关</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="uploader">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>图片上传</p></div>
                                </div>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="3">高阶组件</th>
                        </tr>
                        <tr>
                            <td>
                                <div class = "draggable vm"  action-view="datetimepicker">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>时间选择</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="picker">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>选择器</p></div>
                                </div>
                            </td>
                            <td>
                                <div class = "draggable vm" action-view="pullrefresh">
                                    <span class = "drag fa fa-arrows"></span>
                                    <div class = "preview"><i class="fa fa-font"></i><p>下拉刷新</p></div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

                <div class = "od-tab-content-item" id = "procedure">
                    <div class = "procedure-node radius" data-node = "start">开始<i class = "fa fa-arrows-alt alt" contenteditable="false"></i></div>
                    <div class = "procedure-node" data-node = "assign">赋值<i class = "fa fa-arrows-alt alt" contenteditable="false"></i></div>
                    <div class = "procedure-node parallelogram" data-node = "data">数据<i class = "fa fa-arrows-alt alt" contenteditable="false"></i></div>
                    <div class = "procedure-node diamond" data-node="judge"><div class = "rediamond">判断</div><i class = "fa fa-arrows-alt alt" contenteditable="false"></i></div>
                    <div class = "procedure-node radius" data-node="end">结束<i class = "fa fa-arrows-alt alt" contenteditable="false"></i></div>
                    <div class = "procedure-node circle" data-node="request">网络请求<i class = "fa fa-arrows-alt alt" contenteditable="false"></i></div>
                    <div class = "procedure-node subprocess" data-node="subprocess">子流程<i class = "fa fa-arrows-alt alt" contenteditable="false"></i></div>
                </div>
            </div>
        </div>
    </aside>
    <article class = "content">
        <div>
            <div class = "od-tabs">
                <div class = "od-tabs-title">
                    <div class = "od-tab-title active" tab-target = "databox">视图</div>
                    <div class = "od-tab-title" tab-target = "procedurebox">流程</div>
                </div>
                <div class = "od-tab-content">
                    <div class = "od-tab-content-item active" id = "databox">
                        <div class = "preview-viewer">
                            <div class = "phonebar">
                                <img src = "/image/phonebar.png"/>
                            </div>
                            <div class = "sortable" id="editor">

                            </div>
                        </div>
                        <div class = "databox">
                            <div class = "bg-light">
                                <div class = "newBtn" title="新建数据" id="newData">
                                    <i class = "fa fa-plus new" title="新建数据"></i>
                                </div>
                            </div>
                            <div class = "" id = "vuedata">

                            </div>
                        </div>
                    </div>
                    <div class = "od-tab-content-item" id = "procedurebox">
                        <div><button id = "saveProcess">保存</button></div>
                    </div>
                </div>
            </div>
        </div>
    </article>

</div>
</body>
<script src="/dist/index.js"></script>
<script src="/js/app.js"></script>
</html>